﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>段铭锟</title>
	<link href="image/link.jpg" rel="icon">
	<style>
		body,h1,ul,p{
			margin:0;
			padding: 0;
		}
		.header{
			width:100%;
			height:860px;
			
		}
		.title{
			width:100%;
			heigat:70px;
			
		}
		.title img{
			width:100%;
			height: 100%;
		}
		.nav{
			width:100%;
			height:40px;
			background-color: black;
		}
		.banner{
			width:100%;
			height: 750px;
			background-color: green;
			background-image: url("images/1.jpg");
			background-size:100% 100%;
		}
		.banner:hover{
			background-image: url("images/banner2.jpg");
		}
		.nav_child{
			width:1000px;
			height: 100%;
			background-color: ;
			margin: 0 auto;
		}
		.nav_child a{
			line-height:40px;
			margin-right:66px;
			margin-left:66px;
			text-decoration:none;
			color:white;
		}
		.nav_child a:hover{
			color:orange;
		}
		.main{
			width:100%;	
			
		}
		.title_one{
			width:100%;
			height: 100px;
			background-color: #aaaaaa;
		}
		.list{
			width:100%;
			height:1070px;
		}
		.title_two{
			width:100%;
			height:100px;
			background-color: #aaaaaa;
		}
		.title_one h1{
			font-size:70px;
			text-align: center;
			color:white;
		}
		.title_two h1{
			font-size:70px;
			text-align: center;
			color:white;
		}
		.list_child{
			width:1300px;
			height: 100%;
			margin: 0 auto;
		}
		.list_child ul{
			list-style: none;
		}
		.list_child ul li{
			float: left;
			width:310px;
			height: 520px;
			margin-left: 12px;
			margin-top:10px;
			overflow: hidden;
		}
		.list_child ul li img{
			width:100%;
			height: 100%;
			transition: 1s;
			
		}
		.video{
			width:100%;
		}
		.video_child{
			width:70%;
			height: 100%;
			margin: 0 auto;
		}
		.video_child video{
			width:100%;
			height: 100%;
		}
		.list_child ul li:hover img{
			transform: scale(1.5);
		}
		.footer{
			width: 100%;
			height: 100px;
			background-color:black;
			color:gray;
			text-align: center;
		}
		.footer p{
			line-height: 34px;
		}
	</style>
</head>

<body>
	<div class="header">
		<div class="title">
			<img src="images/title.png">
		</div>
		<div class="nav">
			<div class="nav_child">
				<a href="https://www.baidu.com/">百度搜索</a>
				<a href="https://www.qq.com/">腾讯新闻</a>
				<a href="https://cn.linkedin.com/in/铭锟-段-759ab0163?trk=prof-samename-name">领英信息</a>
				<a href="https://store.steampowered.com/">STEAM</a>
				<a href="https://www.blizzardgames.cn/zh/">暴雪战网</a>
			</div>
		</div>
		<div class="banner">
		</div>
	</div>
		<div class="main">
			<div class="title_one">
				<h1>LOVESHOW</h1>
			</div>
			<div class="list">
				<div class="list_child">
					<ul>
						<li><img src="images/2.jpg"></li>
						<li><img src="images/3.jpg"></li>
						<li><img src="images/4.jpg"></li>
						<li><img src="images/5.jpg"></li>
						<li><img src="images/6.jpg"></li>
						<li><img src="images/7.jpg"></li>
						<li><img src="images/8.jpg"></li>
						<li><img src="images/9.jpg"></li>
					</ul>
				</div>
			</div>
			<div class="title_two">
				<h1>摄影摄像</h1>
			</div>
			<div class="video">
				<div class="video_child">
					<video src="images/video.mp4" controls></video>
				</div>
			</div>
		</div>
	<div class="footer">
		<p>蒙娜丽莎</p>
		<p>地址：北京市朝阳区亚运村小营西路8号</p>
		<p>电话：13587845678458</p>
	</div>
</body>
</html>
